﻿$(document).ready(function () {
    $(".square").hover(
      function () {
          if ($(this).hasClass("empty")) {
              var x = $(this).data("squarex");
              var y = $(this).data("squarey");
              var table = document.getElementById("myTable");
              var h = table.dataset.horizontal;
              if (h == "false") {
                  if (x + 1 < 10) {
                      var id = "" + (x + 1) + y;
                      var second = document.getElementById(id);
                      if (x - 1 >= 0) {
                          var id = "" + (x - 1) + y;
                          var third = document.getElementById(id);
                      }
                      else {
                          var id = "" + (x + 2) + y;
                          var third = document.getElementById(id);
                      }
                  }
                  else {
                      var id = "" + (x - 1) + y;
                      var second = document.getElementById(id);
                      var id = "" + (x - 2) + y;
                      var third = document.getElementById(id);
                  }
              }
              else {
                  if (y + 1 < 10) {
                      var id = "" + x + (y + 1);
                      var second = document.getElementById(id);
                      if (y - 1 >= 0) {
                          var id = "" + x + (y - 1);
                          var third = document.getElementById(id);
                      }
                      else {
                          var id = "" + x + (y + 2);
                          var third = document.getElementById(id);
                      }
                  }
                  else {
                      var id = "" + x + (y - 1);
                      var second = document.getElementById(id);
                      var id = "" + x + (y - 2);
                      var third = document.getElementById(id);
                  }
              }
              if (!$(this).hasClass("ship") && !hasClass(second, "ship") && !hasClass(third, "ship")) {
                  $(this).removeClass("empty");
                  $(this).addClass("hover");
                  second.className = "square hover";
                  third.className = "square hover";
              }
          }
    },
      function () {
          var squares = document.querySelectorAll('.hover');
          for (var i = 0; i < squares.length; i++) {
              if (squares[i].className == "square hover")
                  squares[i].className = "square empty"
          }
      }
    );
    $(".square").click(function () {
        var table = document.getElementById("myTable");
        var h = table.dataset.deleting;
        var boatslef = table.dataset.boats;
        if (h == "false") {
            if (boatslef >= 1) {
                boatslef = (boatslef - 1);
                table.dataset.boats = boatslef;
                var x = $(this).data("squarex");
                var y = $(this).data("squarey");
                var squares = document.querySelectorAll('.hover');
                for (var i = 0; i < squares.length; i++) {
                    squares[i].className = "square ship";
                    squares[i].dataset.partof = "" + x + y;
                }
                var button = document.getElementById("confirm");
                if (boatslef != 0) {
                    button.textContent = boatslef + " left";
                }
                else {
                    button.className = "btn btn-success";
                    button.textContent = "Confirm";
                }
            }
        }
        else if($(this).hasClass("ship")){
            if (boatslef < 5) {
                boatslef++;
                table.dataset.boats = boatslef;
                var x = $(this).data("squarex");
                var y = $(this).data("squarey");
                var partof = $(this).data("partof");
                var squares = document.querySelectorAll('.ship');
                for (var i = 0; i < squares.length; i++) {
                    if (squares[i].dataset.partof == partof) {
                        squares[i].className = "square empty";
                        squares[i].dataset.partof = 0;
                    }
                }
                var button = document.getElementById("confirm");
                if (boatslef > 0) {
                    button.textContent = boatslef + " left";
                    button.className = "btn btn-inverse";
                }
                if (boatslef == 5)
                {
                    var button = document.getElementById("deleting");
                    table.dataset.deleting = "false";
                    button.className = "btn btn-danger";
                    button.textContent = "Delete";
                }
            }
        }
        //$.ajax({
        //    url: 'Game/PlaceShip',
        //    type: 'POST',
        //    contentType: 'application/json;',
        //    data: JSON.stringify({ x: x, y: y }),
        //    success: function (valid)
        //    {

        // }
        //});
    });
    $("#deleting").click(function () {
        var table = document.getElementById("myTable");
        var h = table.dataset.deleting;
        var button = document.getElementById("deleting");
        if (h == "false") {
            table.dataset.deleting = "true";
            button.className = "btn btn-warning";
            button.textContent = "Deleting";
        }
        else {
            table.dataset.deleting = "false";
            button.className = "btn btn-danger";
            button.textContent = "Delete";
        }
    });
    $("#rotate").click(function (evt) {
        var table = document.getElementById("myTable");
        var h = table.dataset.horizontal;
        if (h == "false") {
            table.dataset.horizontal = "true";
        }
        else {
            table.dataset.horizontal = "false";
        }
    });
    function hasClass(element, cls) {
        return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
    }
    $(function HubGame() {
        var con = $.hubConnection();
        var hub = con.createHubProxy('Game');
        var myid = document.getElementById("myId").value;
        var gameId = document.getElementById("gameId").value;
        con.start(function () {
            hub.invoke('Hello', myid, gameId);
        });
        hub.on('hello', function (users, games, connectionId) {
            document.getElementById("signalRConnectionId").value=connectionId;
            var userse = document.getElementById('users');
            while (userse.firstChild) {
                userse.removeChild(userse.firstChild);
            }
            for (index = 0; index < users.length; ++index) {
                $("#users").append(users[index]);
            }
        });

        //hub.on('game', function (gameId,turn) {
        //    document.getElementById('gameId').value = gameId;
        //    document.getElementById('chatList').id = "chatList"+gameId;
        //    document.getElementById('myTurn').value = turn;
            
        //});
        hub.on('start', function (data) {
            gameId = document.getElementById('gameId').value;
            
        });
        hub.on('attack', function (x, y, hit, victory) {
            document.getElementById("myTurn").value = 2;
            var id = "O" + x + y;
            var target = document.getElementById(id);
            if (hit == true) {
                target.className = "square hit";
            }
            else {
                target.className = "square miss";
            }
            if (victory == true) {
                $("#finalM").toggleClass("hidden");
            }
        });

        hub.on('attacked', function (x, y, victory) {
            document.getElementById("myTurn").value = 1;
            var id = "" + x+ y;
            var target = document.getElementById(id);
            if (target.className == "square ship")
                target.className = "square hit";
            else
                target.className = "square miss";
            var button = document.getElementById("confirm");
            button.textContent = "Your turn";
            if (victory == true) {
                $("#finalM").toggleClass("hidden");
            }
        });

        hub.on('message', function (message, game) {
            $("#chatList").append(message);
        });
        
        $("#confirm").click(function () {
            var button = document.getElementById("confirm");
            if (button.className == "btn btn-success") {
                var xs = new Array();
                var ys = new Array();
                var shipParts = document.querySelectorAll('.ship');
                for (var i = 0; i < shipParts.length; i++) {
                    xs.push(shipParts[i].dataset.squarex);
                    ys.push(shipParts[i].dataset.squarey);
                }
                var gameId = document.getElementById("gameId").value;
                hub.invoke("Ready", xs, ys, gameId);
            }
        });

        $("#sendBtn").click(function () {
            var gameId = document.getElementById("gameId").value;
            var messageText = document.getElementById("textInput").value;
            document.getElementById("textInput").value = "";
            var myid = document.getElementById("myId").value;
            hub.invoke('Message', myid, gameId, messageText);
        });

        $(function () {
            $(document).keydown(function (evt) {
                if (evt.keyCode == 13) {
                    var gameId = document.getElementById("gameId").value;
                    var messageText = document.getElementById("textInput").value;
                    document.getElementById("textInput").value = "";
                    var myid = document.getElementById("myId").value;
                    hub.invoke('Message', myid, gameId, messageText);
                }
            });
        });

        $(".squareOpponent").click(function () {
            var myTurn = document.getElementById("myTurn").value;
            if (myTurn == "1") {
                var gameId = document.getElementById("gameId").value;
                var x = $(this).data("squarex");
                var y = $(this).data("squarey");
                var button = document.getElementById("confirm");
                button.textContent = "Wait";
                hub.invoke("attack", x, y, gameId);
            }
        });
    });
})